import { StylesDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.UnstyledComponents);

# Unstyled components

## Using Mantine as a headless UI library

You can use Mantine as a headless UI library. To do that, simply do not import `@mantine/*/styles.css`
in your application. Then you will be able to apply styles to Mantine components using [Styles API](/styles/styles-api/)
with a styling solution of your choice.

## HeadlessMantineProvider

`HeadlessMantineProvider` is an alternative to [MantineProvider](/theming/mantine-provider)
that should be used when you want to use Mantine as a headless UI library. It removes all
features that are related to Mantine styles:

- Mantine classes are not applied to components
- Inline CSS variables are not added with `style` attribute
- All color scheme related features are removed
- Global styles are not generated

Limitations of `HeadlessMantineProvider`:

- [Color scheme switching](/theming/color-schemes/) will not work. If your application has a dark mode, you will need to implement it on your side.
- Props that are related to styles in all components (`color`, `radius`, `size`, etc.) will have no effect.
- Some components that rely on styles will become unusable ([Grid](/core/grid), [SimpleGrid](/core/simple-grid), [Container](/core/container), etc.).
- `lightHidden`/`darkHidden`, `visibleFrom`/`hiddenFrom` props will not work.
- [Style props](/styles/style-props/) will work only with explicit values, for example `mt="xs"` will not work, but `mt={5}` will.

To use `HeadlessMantineProvider`, follow [getting started guide](/getting-started/) and replace `MantineProvider` with `HeadlessMantineProvider`.
Note that you do not need to use [ColorSchemeScript](/theming/color-schemes/#colorschemescript) in your application, it will not have any effect,
you can ignore this part of the guide.

```tsx
import { HeadlessMantineProvider } from '@mantine/core';

function App() {
  return (
    <HeadlessMantineProvider>
      {/* Your application */}
    </HeadlessMantineProvider>
  );
}
```

## unstyled prop

Most of Mantine components support `unstyled` prop that removes library styles from the component and allows you to style it
from scratch. Note that `unstyled` prop is not supported by compound components (`Tabs.Tab`, `Menu.Dropdown`, `Accordion.Control`, etc.)
– it only works on root component (`Tabs`, `Menu`, `Accordion`, etc.).

Unstyled [Tabs](/core/tabs) component:

<Demo data={StylesDemos.unstyled} />

> **Choosing between unstyled prop and headless components**
>
> `unstyled` prop is useful when you want to remove library styles from a single component,
> but keep styles for other components. For example, if [Tabs](/core/tabs) component does
> not meet your design system requirements, but all other components do, you can use `unstyled`
> prop to remove styles from Tabs and style it from scratch, while keeping all other components
> styled with Mantine styles.
>
> Note that `unstyled` prop does not remove Mantine library styles from your `.css` bundle –
> it only does not apply them to component with `unstyled` prop.
